﻿<%@ page language="C#" autoeventwireup="true" inherits="Default_Category, App_Web_bpburowk" %>

<%@ Register Src="Footer.ascx" TagName="Footer" TagPrefix="MojoCube" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="shortcut icon" href="../Images/favicon.ico" type="image/x-icon" />
    <%=MainCss%>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.lazyload.min.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
    
    <style type="text/css">
        #leftdiv{width:25%; height:83%; float:left; overflow:scroll; background:url(images/left.png) repeat-y right 0 #F5F5F5;}
        #rightdiv{width:75%; height:83%; float:left; overflow:scroll;}
        .left_menu{ padding:15px 10px; border-bottom:solid 1px #eee;}
        #leftdiv .active{ background:#fff; font-weight:700;}
        .prodiv{padding:5px;}
        .pro_item{float:left; width:33.33%;}
        .pro_wrap{padding:5px; position:relative;}
        .pro_image{text-align:center;}
        .pro_image img{height:50px;}
        .pro_name{ background:#fff; color:#000; padding:0 5px; height:30px; line-height:30px; overflow:hidden; text-align:center; font-size:9pt;}
        .pro_buy{ padding:10px;}
        .pro_price{font-size:13pt; font-weight:700; color:red}
        .pro_cart{float:right; font-size:20pt;}
        .pro_cart .icon{ font-size:20pt; color:#333;}
        .show_img{height:50%; overflow:hidden;}
        .show_img img{width:50%}
        .show_name{font-size:12pt; font-weight:700;}
        .show_price{position:absolute; bottom:60px; text-align:center; width:200px; margin:0 0 0 -100px; left:50%; background:#fff;}
        .edit-wrap{width:94%; height:68%; position:fixed; z-index:100; background:#fff; border-radius:3px; overflow:hidden;}
        .qty{width:50px; text-align:center; border:0px; border-bottom:solid 1px #333; font-size:18pt;}
        #showCart{width:160px; line-height:40px; background:#0094DE; color:#fff; margin:0 0 0 -80px; text-align:center; border-radius:5px; position:absolute; bottom:10px; z-index:100; left:50%}
        .sq{ position:absolute; width:100px; height:100px; top:50%; left:50%; margin:-50px 0 0 -50px;}
        .sq img{width:100px;}
        .sqimg .lazy{filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}
    </style>
        
    <script type="text/javascript"> 

        function showPro(id)
        {
            var menu = document.getElementById("leftdiv").getElementsByTagName("div");
            for (i = 0; i < menu.length; i++) { menu[i].className = "left_menu" }
            document.getElementById('menu' + id).className = "left_menu active fontcolor1";

            var pro = $('#rightdiv .prodiv');
            for (i = 0; i < pro.length; i++) { pro[i].style.display = "none" }
            document.getElementById('pro' + id).style.display = "";

            $('#rightdiv').scrollTop(0);
        }

    </script> 
    
</head>

<body>

    <div class="index_wrapper">

    <header>

        <div class="topbar">
            <a href="javascript:history.back(-1)" class="back_btn"><i class="icon iconfont">&#xf0115;</i></a>
            <a href="Product.aspx" class="top_home"><i class="icon iconfont">&#xf00d7;</i></a>
            <h1 class="page_title"><asp:Label ID="lblTitle" runat="server"></asp:Label></h1>
        </div>

    </header>

    <form id="form1" runat="server">
    
        <MojoCube:Footer ID="Footer" runat="server" />

        <asp:ScriptManager id="ScriptManager1"  runat="server"></asp:ScriptManager>
    
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
        
                <script src="js/updatepanel.js" type="text/javascript"></script>
        
                <div class="news_search" style="border-bottom:solid 1px #eee; padding-bottom:10px;">
                    <div class="news_search_div">
                        <asp:TextBox ID="txtKeyword" runat="server" placeholder="输入搜索关键字" CssClass="news_search_txt"></asp:TextBox>
                        <asp:LinkButton ID="lnbSearch" runat="server" CssClass="news_search_btn" OnClick="lnbSearch_Click"><i class="icon iconfont">&#xf00a8;</i></asp:LinkButton>
                    </div>
                </div>

                <div id="leftdiv" runat="server">
                
                </div>

                <div id="rightdiv" runat="server">
            
                </div>
        
                <script type="text/javascript">
                    $(function () {
                        $("img.lazy").lazyload({
                            container: $("#rightdiv"),
                            event: "showPro"
                        });

                        $(window).bind("load", function () {
                            var timeout = setTimeout(function () {
                                $("img.lazy").trigger("showPro")
                            }, 100);
                        });
                    });
                </script>

            </ContentTemplate>
        </asp:UpdatePanel>

    </form>

    </div>
    
</body>

</html>